extends ./mixins/_layout

block content
  body
    #enter
      #login
        .yourid 点击切换你的角色:
        .cdplayer
          #loginBox(user='ui')
            .ui
              img(src="images/jay.jpg", alt="")
            .enginer(style="transform-origin: right;")
              img(src="images/header_img.jpg", alt="")
        button#signBtn.signBtn
          i.text 登录

    script(src="/js/zepto.v1.2.0" +config.min + ".js")
    script.
      $(function(){
        var loginBox = $('#loginBox'), signBtn=$('#signBtn'), zIndex = 2, timer, logtime, ui = loginBox.find('.ui'), enginer = loginBox.find('.enginer'), locked = false;
        ui.css({'transition-duration':'.6s'});
        enginer.css({'transition-duration':'.6s'});
        loginBox.on('click', function(){
          var _this = $(this);
          if(locked) return;
          locked = !locked;
          if(_this.attr('user') == 'ui'){
            _this.attr('user', 'enginer');
            enginer.css({
              'transform':'rotateY(0deg)',
              'z-index':zIndex+=1
            });
            setTimeout(function(){
              ui.addClass('paused').css({
                'transition-duration':'0s',
                'transform-origin':'right center 0',
                'transform':'rotateY(90deg)'
              });
            }, 561);
            setTimeout(function(){
              ui.css({
                'transition-duration':''
              })
            }, 594);

            setTimeout(function(){
              enginer.css({'transform-origin':'center'});
              locked = !locked;
            }, 623);
          }else{
            _this.attr('user', 'ui');
            ui.css({
              'transform':'rotateY(0deg)',
              'z-index':zIndex+=1
            });
            setTimeout(function(){
              enginer.addClass('paused').css({
                'transition-duration':'0s',
                'transform-origin':'right center 0',
                'transform':'rotateY(90deg)'
              });
            }, 561);
            setTimeout(function(){
              enginer.css({
                'transition-duration':''
              })
            }, 594);

            setTimeout(function(){
              ui.css({'transform-origin':'center'});
              locked = !locked;
            }, 623);
          }
        });

        // 提交表单
        function formSubmit(){
          $.ajax({
            'type':"POST",
            'url':'/postlogin',
            'data':{
              'account': 'keydone'
            },
            'success':function(data){
              var userid = loginBox[0].getAttribute('user');
              if(data.status==1){
                return window.location.href=userid=='ui'?'/ui':'/';
              }else{
                alert({'msg':data.msg});
              }
            }
          });
        };
        signBtn.on('click',function(){
          formSubmit();
        });
        $(document).on('keydown',function(e){
          var keynum, ev = e||window.event;
          if(window.event){
            keynum=e.keyCode
          }else if(e.which){
            keynum = e.which
          }
          if(keynum==13){
            formSubmit();
          }
        });
        
      });
      